<template>
  <div class="bpl1-bg">
    <div class="co-title">
      <div class="co-title-name">
        <img src="@/assets/cockpit/subdivision/gdbh-text-jbnt.png" alt="" />
      </div>
      <div class="co-title-right gdbh-title-right">
        <div class="co-title-select gdbh-selected">
          <el-select v-model="selectedValue" placeholder="请选择" :popper-append-to-body="false">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </div>
        <div class="co-title-breathe"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
    </div>
    <div class="detail-content">
      <!--  -->
      <div class="left">
        <ul class="detail-num">
          <div class="com-title-style">
            <div class="title-line">
              <img src="@/assets/cockpit/subdivision//wq-icon-yq.png" alt="" />
            </div>
            <div class="text-area">
              <p class="text">永久基本农田实存面积</p>
              <p class="num"><span class="value">27.35</span> <span class="label">万公顷</span></p>
            </div>
          </div>
          <div class="row-line"></div>
          <div class="com-title-style">
            <div class="title-line">
              <img src="@/assets/cockpit/subdivision//wq-icon-yq.png" alt="" />
            </div>
            <div class="text-area">
              <p class="text">永久基本农田目标面积</p>
              <p class="num"><span class="value">27.65</span> <span class="label">万公顷</span></p>
            </div>
          </div>
          <div class="row-line"></div>
          <div class="fy-area">
            <div class="left-text">
              <div class="text-icon text-icon-yellow"></div>
              <div class="text">富裕值</div>
            </div>
            <div class="right-text">
              4.03 万公顷
            </div>
          </div>
        </ul>
      </div>
      <div class="mid-line"></div>
      <div class="right">
        <div class="right-lf">
          <div class="lf-container">
            <div class="lf">
              <p class="title">2021年度各县市区永久基本农田面积</p>
              <div class="pq-echart-box" id="jbntEchart"></div>
            </div>
            <div class="rg">
              <div class="floorage-tabs">
                <div :class="isActive === 1 ? 'active' : ''" @click="clickActive(1)">地区详情</div>
                <div :class="isActive === 2 ? 'active' : ''" @click="clickActive(2)">年份对比</div>
              </div>
              <div class="item">
                <div class="icon icon1"></div>
                <div class="text">水田</div>
              </div>
              <div class="item">
                <div class="icon icon2"></div>
                <div class="text">旱地</div>
              </div>
              <div class="item">
                <div class="icon icon3"></div>
                <div class="text">水浇地</div>
              </div>
            </div>
          </div>
        </div>

        <div class="right-rg">
          <div class="mid-line line-style"></div>
          <div class="right-container">
            <p class="title">永久基本农田结构</p>
            <div class="container-area">
              <ul class="percenter">
                <li style="height:13%">13%</li>
                <li style="height:28%">28%</li>
                <li style="height:59%">59%</li>
              </ul>
              <ul class="des">
                <li>
                  <div class="item">
                    <div class="item-lf">
                      <div class="icon icon1"></div>
                      <div class="item-title">水田</div>
                    </div>
                    <div class="item-rg">124,118.23 公顷</div>
                  </div>
                </li>
                <li>
                  <div class="item">
                    <div class="item-lf">
                      <div class="icon icon2"></div>
                      <div class="item-title">旱地</div>
                    </div>
                    <div class="item-rg">93,118.93 公顷</div>
                  </div>
                </li>
                <li>
                  <div class="item">
                    <div class="item-lf">
                      <div class="icon icon3"></div>
                      <div class="item-title">水浇地</div>
                    </div>
                    <div class="item-rg">102,118.93 公顷</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import echarts from 'echarts'

@Component({
  name: 'LandProtectionItem4',
  components: {}
})
export default class LandProtectionItem4 extends Vue {
  private isActive = 1
  private selectedValue = 1
  private options = [
    {
      value: 1,
      label: '2021年'
    }
  ]

  clickActive(type: number) {
    this.isActive = type
  }

  mounted() {
    this.initVillage2()
  }
  initVillage2() {
    const myChart = echarts.init(document.getElementById('jbntEchart') as HTMLElement)
    myChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      label: {
        color: '#ffffff'
      },
      grid: {
        top: '4%',
        left: '0%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        // data: ['2017', '2018', '2019', '2020', '当前'],
        data: ['芙蓉区', '天心区', '开福区', '岳麓区', '雨花区', '望城区', '长沙县', '宁乡市', '浏阳市'],
        //设置网格线颜色
        splitLine: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#254177'
          }
        },
        axisLabel: {
          show: true,
          interval: 0,
          rotate: 40,
          textStyle: {
            color: '#ffffff', //更改坐标轴文字颜色
            fontSize: 10 //更改坐标轴文字大小
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          show: true,
          textStyle: {
            color: '#ffffff', //更改坐标轴文字颜色
            fontSize: 12 //更改坐标轴文字大小
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#223e75'],
            width: 1,
            type: 'solid'
          }
        },
        // y轴轴线颜色
        axisLine: {
          lineStyle: {
            color: '#254177',
            width: 0 //这里是坐标轴的宽度
          }
        }
      },
      series: [
        {
          name: '水田',
          type: 'bar',
          barWidth: '50%',
          stack: '使用情况',
          emphasis: {
            focus: 'series'
          },
          data: [5, 20, 36, 10, 10, 20, 10, 10, 20],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#3DC8FC'
              },
              {
                offset: 0.5,
                color: '#1C96EF'
              },
              {
                offset: 1,
                color: '#245ABF'
              }
            ])
          },
          showBackground: false,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        },
        {
          data: [68, 77, 13, 44, 16, 79, 77, 13, 44],
          name: '旱地',
          type: 'bar',
          barWidth: '50%',
          stack: '使用情况',
          emphasis: {
            focus: 'series'
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#2EFFAF'
              },
              {
                offset: 0.5,
                color: '#00FFAA'
              },
              {
                offset: 1,
                color: '#21C18B'
              }
            ])
          },
          showBackground: false,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        },
        {
          data: [5, 20, 36, 10, 10, 20, 77, 13, 44],
          name: '水浇地',
          type: 'bar',
          barWidth: '50%',
          stack: '使用情况',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#FFEB7B'
              },
              {
                offset: 0.5,
                color: '#ECBF45'
              },
              {
                offset: 1,
                color: '#AB9700'
              }
            ])
          },
          showBackground: false,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ]
    })
  }
}
</script>
<style lang="scss" scoped>
@import '~@/styles/cockpit.scss';
.bpl1-bg {
  width: 100%;
  height: 100%;
  padding: 22px 12px 12px 16px;
  background: url('~@/assets/cockpit/bb-bg.png') no-repeat 0/ 100% 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  .co-title {
    flex-shrink: 0;
  }
  .gdbh-title-right {
    display: flex;
    .right-text {
      font-size: 12px !important;
      color: #dffeff;
      margin-right: 16px;
      margin-top: 6px;
    }
  }
  .gdbh-selected {
    width: 101px !important;
    margin-right: 20px;
  }
}

.com-title-style {
  margin-bottom: 4px;
  margin-top: 16px;
  color: #bffeff;
  display: flex;

  .title-line {
    width: 40px;
    img {
      display: block;
      width: 100%;
    }
  }
}

.detail-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex: 1;
  .left {
    flex: 1;
    .row-line {
      width: 92%;
      height: 1px;
      background: rgba(255, 255, 255, 0.1);
      margin-top: 11px;
    }
    .fy-area {
      width: 92%;
      display: flex;
      justify-content: space-between;
      margin: auto;
      margin-top: 12px;
      .left-text {
        display: flex;
        .text {
          font-size: 12px !important;
          color: #bffeff;
          margin-left: 6px;
        }
      }

      .right-text {
        font-size: 14px !important;
        color: #fff;
        margin-right: 6px;
      }
    }
    .detail-num {
      margin-top: 10px;
      .text-area {
        .text {
          font-size: 12px !important;
          color: #bffeff;
        }
        .num {
          line-height: 26px;
          .value {
            font-size: 20px !important;
            color: #fff;
          }
          .label {
            font-size: 12px !important;
            color: #fff;
            margin-left: 6px;
          }
        }
      }
      li {
        display: flex;
        justify-content: space-between;
        width: 210px;
        height: 24px;
        line-height: 24px;
        background: rgba(255, 255, 255, 0.05);
        margin-bottom: 6px;

        .title {
          display: flex;
          margin-left: 6px;
          .icon {
            width: 4px;
            height: 4px;
            margin-top: 10px;
            margin-right: 6px;
            display: block;
            background: #f9f0d4;
            border-radius: 1px;
            box-shadow: 0 0 4px 1px #f0b04a;
            transform: rotate(45deg);
          }
          .name {
            font-size: 12px;
            color: #bffeff;
          }
        }

        .number {
          font-size: 14px !important;
          text-align: right;
          color: #fff;
          margin-right: 6px;
        }
      }
    }
  }
  .right {
    flex: 3;
    display: flex;
    .line-style {
    }
    .right-lf {
      flex: 2;
      .lf-container {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-top: 20px;
        .lf {
          .title {
            font-size: 14px !important;
            color: #dffeff;
          }
          .pq-echart-box {
            width: 372px;
            height: 120px;
            margin-top: 16px;
          }
        }
        .rg {
          margin-top: 40px;
          position: relative;
          .item {
            display: flex;
            margin-top: 8px;
            margin-left: 2px;
            .icon {
              width: 6px;
              height: 6px;

              margin-top: 4px;
              transform: rotate(45deg);
              -ms-transform: rotate(45deg); /* IE 9 */
              -moz-transform: rotate(45deg); /* Firefox */
              -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
              -o-transform: rotate(45deg); /* Opera */
            }
            .icon1 {
              background: linear-gradient(180deg, #3dc8fc 0%, #1c96ef 50%, #245abf 100%);
            }
            .icon2 {
              background: linear-gradient(180deg, #2effaf 0%, #0fa 50%, #21c18b 100%);
            }
            .icon3 {
              background: linear-gradient(180deg, #ffeb7b 0%, #ecbf45 50%, #ab9700 100%);
            }
            .text {
              font-size: 12px !important;
              color: #dffeff;
              margin-left: 8px;
            }
          }
        }
      }
      .floorage-tabs {
        position: absolute;
        top: -60px;
        right: 0;
        font-size: 14px !important;
        text-align: center;
        color: #fff;
        display: flex;
        margin: 15px auto 6px auto;
        .active {
          color: #fff;
          font-weight: 500;
          font-size: 14px !important;
          background: url('~@/assets/cockpit/subdivision/text-bg.png') no-repeat 0/ 100% 100%;
          opacity: 1 !important;
        }
        div {
          width: 85px;
          height: 26px;
          line-height: 26px;
          background: rgba(0, 0, 0, 0.15);
          opacity: 0.7;
          cursor: pointer;
        }
      }
    }
    .right-rg {
      flex: 1;
      display: flex;
      .line-style {
        margin: 12px;
      }
      .right-container {
        .title {
          font-size: 14px !important;
          color: #dffeff;
          margin-top: 10px;
        }
        .container-area {
          display: flex;
          .percenter {
            width: 20px;
            height: 127px;
            line-height: 20px;
            color: #fff;
            text-align: center;
            margin-top: 12px;

            li {
              display: flex;
              align-items: center;
              flex-wrap: wrap;
              font-size: 10px !important;
            }
            li:nth-of-type(1) {
              background: linear-gradient(180deg, #ffeb7b 0%, #ecbf45 50%, #ab9700 100%);
            }
            li:nth-of-type(2) {
              background: linear-gradient(180deg, #2effaf 0%, #0fa 50%, #21c18b 100%);
            }
            li:nth-of-type(3) {
              background: linear-gradient(180deg, #3dc8fc 0%, #1c96ef 50%, #245abf 100%);
            }
          }
          .des {
            margin: 11px 12px;
            li {
              width: 171px;
              height: 41px;
              background: rgba(255, 255, 255, 0.05);
              overflow: hidden;
              margin-bottom: 2px;
              .item {
                margin: 12px 8px;
                display: flex;
                justify-content: space-between;
                .item-lf {
                  display: flex;
                  .icon {
                    width: 6px;
                    height: 6px;
                    margin-top: 6px;
                    transform: rotate(45deg);
                    -ms-transform: rotate(45deg); /* IE 9 */
                    -moz-transform: rotate(45deg); /* Firefox */
                    -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
                    -o-transform: rotate(45deg); /* Opera */
                  }
                  .icon1 {
                    background: linear-gradient(180deg, #3dc8fc 0%, #1c96ef 50%, #245abf 100%);
                  }
                  .icon2 {
                    background: linear-gradient(180deg, #2effaf 0%, #0fa 50%, #21c18b 100%);
                  }
                  .icon3 {
                    background: linear-gradient(180deg, #ffeb7b 0%, #ecbf45 50%, #ab9700 100%);
                  }

                  .item-title {
                    color: #bffeff;
                    font-size: 12px !important;
                    margin-left: 6px;
                    margin-top: 2px;
                  }
                }
                .item-rg {
                  font-size: 14px !important;
                  color: #fff;
                }
              }
            }
          }
        }
      }
    }
  }
  .mid-line {
    width: 1px;
    height: 152px;
    background: rgba(255, 255, 255, 0.1);
    margin-left: 0;
    margin-top: 17px;
    margin-right: 10px;
    flex-shrink: 0;
  }
}
</style>
